<template>
  <header :style="{background: bgColor}">
    <div class="header-box">
      <Logo/>
      <div class="header-btn">
        <span class="wallmobil" @click="connect"></span>
        <span class="lang" @click="changelang">{{ lang }}</span>
        <span class="btn-menu" @click="switchMenu"></span>
      </div>
    </div>
  </header>
</template>
<script setup>
import { ref, computed } from 'vue'
import { getCommonStore  } from '../../stores/common';
import  { useI18n } from 'vue-i18n';
import Logo from '../Logo/index.vue'
import Web3 from "web3";

const commonStore = getCommonStore()
const provider = ref({});
const web3 = ref("");

// 菜单显隐
const switchMenu = () => {
  commonStore.menuShow = !commonStore.menuShow
}
// 钱包显隐
const switchWallet = () => {
  commonStore.walletShow = !commonStore.walletShow
}
const connect = () => {
    /* this.provider
      .request({ method: "eth_requestAccounts" })
      .then()
      .catch((err) => {
        if (err.code === 4001) {
          console.log("Please connect to MetaMask.");
        } else {
          console.error(err);
        }
    }); */
}

// 滑动滚动条，设置背景色
let scrollTop = ref(0)
const handleScroll = () => {
  scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
const bgColor = computed(() => {
  return `rgba(0,0,0, ${(Math.min(scrollTop.value,60) / 60) * 0.8})`
})
window.addEventListener("scroll", handleScroll)
 
 
const i18n = useI18n()
console.log(i18n);
 
const lang = computed(() => {
  return i18n.locale.value== 'zh' ? "ZH-CN" : "EN"
})
function changelang(){
  i18n.locale.value=='zh'?i18n.locale.value='en':i18n.locale.value='zh'
}


</script>

<style scoped lang='scss'>
header {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  max-width: 980px;
  padding-top: 0;
  min-height: 3.375rem;
  background: transparent;
  color: #150e54;
  z-index: 999;
  &.bg {
    background: rgba(0, 0, 0, 0.8);
  }
  .header-box {
    height: 3.375rem;
    padding: 0 0.625rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .hd-number {
      border-radius: 3.125rem;
      padding: 0.375rem;
      background: linear-gradient(180deg,#e1e3f5 0,#fff);
      border: 0.1px solid #fff;
      white-space: nowrap;
      overflow: hidden;
      max-width: 8.75rem;
      min-width: 8.75rem;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .tag {
        border-radius: 0.9375rem;
        line-height: 1.0625rem;
        margin-right: 1.875rem;
        font-size: 0.625rem;
        display: inline-block;
        padding: 0 0.3125rem;
      }
      .cyan {
        background-color: #12c9d9;
        color: #fff;
      }
      .con {
        color: #12c9d9;
        font-size: 0.875rem;
      }
    }
  }
  .header-btn {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    .lang {
      border: 1px solid rgb(255, 255, 255);
      color: #fff;
      vertical-align: middle;
      font-size: 0.875rem;
      height: 1.6rem;
      line-height: 1.6rem;
      display: inline-block;
      width: 4rem;
      text-align: center;
  
    }
    .btn-menu {
      display: inline-block;
      vertical-align: middle;
      width: 2rem;
      height: 2.5rem;
      font-size: 1.5625rem;
      right: 0.625rem;
      background:url('../../assets/imgs/menu.png')no-repeat;
      background-size: 80%;
      background-position: center;
      cursor: pointer;
    }
    .wallmobil {
      display: inline-block;
      vertical-align: middle;
      width: 2rem;
      height: 2.5rem;
      font-size: 1.5625rem;
      right: 0.625rem;
      background:url('../../assets/imgs/wallmobil.png')no-repeat;
      background-size: 80%;
      background-position: center;
      cursor: pointer;
    }
  }
}
</style>